<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="vue2-sfc-loader.js"></script>
  <script>

    /* <!-- */
    const config = {
      files: {
        '/app.vue': `
          <template>
            <span class="vue2">
            Hello World! {{ abc }}
            </span>
          </template>
          <style scoped>
            .vue2 {
              background: red
            }
          </style>
          <script>
            export default {
              data: {
                  abc: "test"
              }
            }
          <\/script>
       `
      }
    };
    /* --> */

    const options = {
      moduleCache: { vue: Vue },
      getFile: url => config.files[url],
      addStyle: (textContent) => {
          const style = Object.assign(document.createElement('style'), { textContent });
          const ref = document.head.getElementsByTagName('style')[0] || null;
          document.head.insertBefore(style, ref);
      },
    }

    const asyncComponentFactory = window['vue2-sfc-loader'].loadModule('/app.vue', options)
    asyncComponentFactory.then((component) => {
        new Vue(component).$mount('#app')
    })

  </script>
</body>
</html>
